import React from 'react';
import {
  Box,
  Button,
  Flex,
  Heading,
  IconButton,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaVolumeUp, FaStar, FaRegStar } from 'react-icons/fa';
import { Word } from '../../types';

interface WordDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  word: Word | null;
  isFavorite: boolean;
  onToggleFavorite: () => void;
}

const WordDetailModal: React.FC<WordDetailModalProps> = ({
  isOpen,
  onClose,
  word,
  isFavorite,
  onToggleFavorite,
}) => {
  const cardBg = useColorModeValue('white', 'gray.700');

  if (!word) return null;

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <ModalOverlay />
      <ModalContent bg={cardBg}>
        <ModalHeader>
          <Flex justifyContent="space-between" alignItems="center">
            <Heading as="h3" size="lg">
              {word.word}
            </Heading>
            <IconButton
              icon={isFavorite ? <FaStar /> : <FaRegStar />}
              aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
              onClick={onToggleFavorite}
              variant="ghost"
            />
          </Flex>
        </ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text fontSize="md" color="gray.500" mb={4}>
            {word.partOfSpeech}
          </Text>

          <Box mb={6}>
            <Text fontWeight="bold" mb={2}>
              Translation:
            </Text>
            <Text>{word.translation}</Text>
          </Box>

          <Box mb={6}>
            <Text fontWeight="bold" mb={2}>
              Definition:
            </Text>
            <Text>{word.definition}</Text>
          </Box>

          <Box mb={6}>
            <Text fontWeight="bold" mb={2}>
              Example:
            </Text>
            <Text fontStyle="italic">{word.example}</Text>
            <Text fontStyle="italic" color="gray.500" mt={1}>
              {word.exampleTranslation}
            </Text>
          </Box>

          <Box>
            <Text fontWeight="bold" mb={2}>
              Pronunciation:
            </Text>
            <Button
              leftIcon={<FaVolumeUp />}
              variant="outline"
              size="sm"
              onClick={() => {
                // Play pronunciation or handle audio playback
                // This is a placeholder for actual audio functionality
              }}
            >
              Listen
            </Button>
          </Box>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="brand" onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default WordDetailModal;
